<template>
  <div class="course-info">
     <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click.native="$router.push('/learn')"
    />
    <van-cell-group :style="styleOptions">
      <!-- 课程图片 -->
      <van-cell class="course-img">
        <img :src="course.courseImgUrl">
      </van-cell>
      <!-- 课程描述 -->
      <van-cell class="course-description">
        <h2 v-text="course.courseName"></h2>
        <p v-text="course.previewFirstField"></p>
        <div class="course-sale-info">
          <p class="course-price">
            <span class="discounts">￥{{course.discounts}}</span>
            <span>￥{{course.price}}</span>
          </p>
          <span class="tag">已购人数{{course.sales}}</span>
          <span class="tag">每周三、周五更新</span>
        </div>
      </van-cell>
      <!-- 课程详细内容 -->
      <van-cell class="course-detall">
        <van-tabs sticky scrollspy>
          <van-tab title="详情">
            <!-- 课程详情信息通过父文本编辑设置的,内容为 HTML 文本 -->
            <div v-html="course.courseDescription"></div>
          </van-tab>
          <van-tab title="内容">
            <course-section
              v-for="item in sections"
              :key="item.id"
              :sections-data="item"
            ></course-section>
          </van-tab>
        </van-tabs>
      </van-cell>
    </van-cell-group>
    <!-- 底部支付功能 -->
    <van-tabbar v-if="course.isBuy">
      <div class="tabbar-price">
        <span class="tabber-wenzi">{{ course.discountsTag }}</span>
        <span class="discounts">￥{{ course.discounts }}</span>
        <span class="tabber-price">￥{{ course.price }}</span>
      </div>
      <van-button
        type="primary"
        class="button"
        @click="handlePay"
      >立即购买</van-button>
    </van-tabbar>
  </div>
</template>

<script>
import CourseSection from './components/CourseSection'
import { getCourseById, getSectionAndLesson } from '@/services/course'
export default {
  name: 'CourseInfo',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  components: {
    CourseSection
  },
  data () {
    return {
      // 课程信息
      course: {},
      // 章节信息
      sections: {},
      // 样式信息
      styleOptions: {}
    }
  },
  created () {
    this.loadingCourseById()
    this.loadSections()
  },
  methods: {
    handlePay () {
      // 检测是否登录
      if (this.$store.state.user) {
        // 如果已登录，跳转支付页
        this.$router.push({
          name: 'pay',
          params: {
            courseId: this.courseId
          }
        })
      } else {
        this.$router.push({
          name: 'login',
          query: {
            redirect: this.$route.fullPath
          }
        })
      }
    },
    async loadSections () {
      const { data } = await getSectionAndLesson({
        courseId: this.courseId
      })
      // console.log(data)
      this.sections = data.content.courseSectionList
    },
    async loadingCourseById () {
      const { data } = await getCourseById({
        courseId: this.courseId
      })
      // console.log(data)
      this.course = data.content
      if (data.content.isBuy) {
        this.styleOptions.bottom = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell-group {
  .course-img {
    height: 280px;
  }
  .course-description {
    padding: 10px 20px;
    height: 150px;
    h2 {
      margin: 0px;
    }
    .course-sale-info {
      display: flex;
      .course-price {
        flex: 1;
        margin: 0;
        .discounts {
          color: #ff7452;
          font-size: 24px;
          font-weight: 700;
        }
      }
      .tag {
        background-color: #f8f9fa;
        font-size: 12px;
        font-weight: 700;
        color: #666;
        margin-left: 10px;
        padding: 7px;
        line-height: 15px;
        border-radius: 3px;
      }
    }
  }
}

.discounts {
  color: #ff7452;
  font-size: 24px;
  font-weight: 700;
}

// .van-cell-group {
//   width: 100%;
//   position: fixed;
//   top: 0;
//   bottom: 50px;
//   // overflow-y: auto;
// }

.van-tabbar {
  // line-height: 50px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tabbar-price {
    .tabber-wenzi {
      font-size: 14px;
    }
    .tabber-price {
      font-size: 14px;
    }
  }
  .button {
    width: 50%;
    height: 80%;
  }
}
</style>
